{% extends "bet_base.html" %}
{% block extra_styles %}
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}styles/style2.css" />
{%endblock%}
{% block content %}
<div id="maincontent">
<h1> Welcome to the Board. Here you will find all the active bets. </h1>
 <div class="intro">
 <p>When you buy a bet, you pay the price of the bet, which reflects the odds. If the event occurs, you win the bet and make $10,000. Now, if you sell the bet instead, you pay $10,000 - price. If the bet does not occur, you win $10,000 with a net profit of the original price of the bet.</p>
 <a href="#" id="exampletog">Show example</a>
 <div id="example" style="display: none;">
 <p>
<h4><u>Buy: Romney wins Iowa</u></h4>
Cost = Price = $1000<br>
Payout if Romney wins Iowa = $10,000<br>
Profit = $9,000<br>
<h4><u>Sell: Romney wins Iowa</u></h4>
Cost = Payout-Price = $10,000-$1,000<br>
Payout if Romney does not win Iowa = $10,000<br>
Profit = $1,000<br>
 </p>
 </div>
 </div>
 <br>
 <div class="bank"><h2> Your Bankroll: ${{bankroll}}</h2></div>

{%if type = "expired" %}
<div class="bets" id="bet_expire">
<h2> Place a bet </h2>
<h3>{{bank_error}}</h3>
Sort by:  Expiration Date | <a href="/board/alpha" id="exampletog">Alphabetical</a> | <a href="/board/price" id="exampletog">Price</a> | <a href="/board/category" id="exampletog">Category</a>
<br>
<br>
<form action="board" method="post">
 {% csrf_token %}
<table>
<thead>
<th>Bet Description</th>
<th>Price</th>
<th> Expires </th>
<th>Buy</th>
<th>Sell</th>
</thead>
<tbody>
{% for bet in bets %}
<tr>
<td> {{bet.description }} </td>
<td> ${{bet.price }} </td>
<td>
 {% if bet.expired%}
{{bet.expired.date}} at {{bet.expired.time}}
 {%else%}
{{bet.expired}}
{%endif%}
</td>
<td> <input type="radio" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" name="bet{{bet.id}}" id="choice{{ forloop.counter}}" value="buy" />
<td> <input type="radio" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" name="bet{{bet.id}}" id="choice{{ forloop.counter}}" value="sell" />

</tr>
{% endfor %}
</tbody>
</table>
<br>
<div class="buttondark">
<input type="submit" value="Bet!" />
</div>
</form>
</div>
{%endif%}

{%if type = "alpha" %}
<div class="bets" id="bet_alpha">
<h2> Place a bet </h2>
<h3>{{bank_error}}</h3>

Sort by: <a href="/board" id="exampletog">Expiration Date</a>  | Alphabetical | <a href="/board/price" id="exampletog">Price</a> | <a href="/board/category" id="exampletog">Category</a>
<br><br>
<form action="board" method="post">
 {% csrf_token %}
<table>
<thead>
<th>Bet Description</th>
<th>Price</th>
<th> Expires </th>
<th>Buy</th>
<th>Sell</th>
</thead>
<tbody>
{% for bet in bets %}
<tr>
<td> {{bet.description }} </td>
<td> ${{bet.price }} </td>
<td>
 {% if bet.expired%}
{{bet.expired.date}} at {{bet.expired.time}}
 {%else%}
{{bet.expired}}
{%endif%}
</td>
<td> <input type="radio" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" name="bet{{bet.id}}" id="choice{{ forloop.counter}}" value="buy" />
<td> <input type="radio" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" name="bet{{bet.id}}" id="choice{{ forloop.counter}}" value="sell" />

</tr>
{% endfor %}
</tbody>
</table>
<br>
<div class="buttondark">
<input type="submit" value="Bet!" />
</div>
</form>
</div>
{%endif%}

{%if type = "price" %}
<div class="bets" id="bet_alpha">
<h2> Place a bet </h2>
<h3>{{bank_error}}</h3>

Sort by: <a href="/board" id="exampletog">Expiration Date</a>  | <a href="/board/alpha" id="exampletog">Alphabetical</a> | Price | <a href="/board/category" id="exampletog">Category</a>
<br><br>
<form action="board" method="post">
 {% csrf_token %}
<table>
<thead>
<th>Bet Description</th>
<th>Price</th>
<th> Expires </th>
<th>Buy</th>
<th>Sell</th>
</thead>
<tbody>
{% for bet in bets %}
<tr>
<td> {{bet.description }} </td>
<td> ${{bet.price }} </td>
<td>
 {% if bet.expired%}
{{bet.expired.date}} at {{bet.expired.time}}
 {%else%}
{{bet.expired}}
{%endif%}
</td>
<td> <input type="radio" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" name="bet{{bet.id}}" id="choice{{ forloop.counter}}" value="buy" />
<td> <input type="radio" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" name="bet{{bet.id}}" id="choice{{ forloop.counter}}" value="sell" />

</tr>
{% endfor %}
</tbody>
</table>
<br>
<div class="buttondark">
<input type="submit" value="Bet!" />
</div>
</form>
</div>
{%endif%}


{%if type = "cats" %}
<div class="bets" id="bet_alpha">
<h2> Place a bet </h2>
<h3>{{bank_error}}</h3>

Sort by: <a href="/board" id="exampletog">Expiration Date</a>  | <a href="/board/alpha" id="exampletog">Alphabetical</a> | <a href="/board/price" id="exampletog">Price</a> | Category
<br><br>
<form action="board" method="post">
 {% csrf_token %}
 
 {%for cat in cats %}
 <h3>{{cat}}</h3>
<table>
<thead>
<th>Bet Description</th>
<th>Price</th>
<th> Expires </th>
<th>Buy</th>
<th>Sell</th>
</thead>
<tbody>
{% for bet in bets %}
{%if bet.title == cat %}
<tr>
<td> {{bet.description }} </td>
<td> ${{bet.price }} </td>
<td>
 {% if bet.expired%}
{{bet.expired.date}} at {{bet.expired.time}}
 {%else%}
{{bet.expired}}
{%endif%}
</td>
<td> <input type="radio" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" name="bet{{bet.id}}" id="choice{{ forloop.counter}}" value="buy" />
<td> <input type="radio" onmousedown="this.__chk = this.checked" onclick="if (this.__chk) this.checked = false" name="bet{{bet.id}}" id="choice{{ forloop.counter}}" value="sell" />

</tr>
{%endif%}
{% endfor %}
</tbody>
</table>
{%endfor%}
<br>
<div class="buttondark">
<input type="submit" value="Bet!" />
</div>
</form>
</div>
{%endif%}
</div>

<script>
$(document).ready(function(){
	var showorhide = true;
	$('#exampletog').click(function () {
	if (showorhide==true){
	$('#exampletog').html("Hide example");
	showorhide=false;}
	else {
	$('#exampletog').html("Show example");
	showorhide=true;}
	$('#example').toggle('slow');
	});});
</script>	
{% endblock %}


